<template>
  <div>
    <a-card :bordered='false' style='margin-top: -5px'>
      <f-search-form :more='true' @searchHandler='searchHandler' :tableObj='tableObj' :show-export-btn='true' :exportUrl='api.bbs.exportList'>
        <f-search-form-item label='交易日期' type='range' name='beginDate' />
        <f-search-form-item label='认款单号'  name='paymentNo' />
        <f-search-form-item label="认款状态" name="amountState" type="select" :data="api.common.status" slot='advanced'></f-search-form-item>
        <f-search-form-item label='单位名称' name='customCode' type='select' :data='api.erpSearch.selectHyCustomList' :params='queryParam' value-key='customNo' label-key='customName' :show-all='false' :show-search='true' slot='advanced'/>
        <f-search-form-item label='交易银行' ref='bank' type='select' name='takeBankId' :data='api.bank.list' valueKey='bankId' label-key='bankName' :required='true' slot='advanced'/>
      </f-search-form>
      <f-table ref='table' rowKey='bankStatementId' :tableColumns='columns'  :scroll='{x:true}' :multiple='false' :operator='operator' handler='hyBankStatementPageListHandler' :params='queryParam' :api='api.bbs.page' :delAction='api.bbs.remove'>
         <span slot='amountState' slot-scope='text'>
          <a-tag color='#2db7f5' v-if='text==1'>已认款</a-tag>
          <a-tag v-if='text==0'>未认款</a-tag>
        </span>
        <span slot='action' slot-scope='text, record'>
          <template v-if='record.amountState==0'>
           <a href='javascript:;' @click='$refs.table.del(record)'>删除</a>
          </template>
        </span>
      </f-table>
      <upload-bank-modal ref='uploadBankModal' :action='api.bbs.importData' @change='uploadEnd()'></upload-bank-modal>

    </a-card>
  </div>
</template>
<script>
import api from "../js/api"
import UploadBankModal from "@/views/module/haiying/bbs/upload_bank_modal"

export default {
  name: "TableList",
  components: {
    UploadBankModal
  },
  data() {
    let me = this
    //操作按钮
    let operator = []
    let isCn = this.$store.state.user.roleInfo.isCn
    if(isCn) {
      operator.push({
        name: "导入银行流水",
        icon: "import",
        that: this,
        handler: (table, that) => {
          this.$refs.uploadBankModal.open()
        }
      })
    }
    operator.push({
      name: "删除",
      icon: "delete",
      batch: true,
      handler: function(table) {
        table.remove()
      }
    })
    return {
      api: Object.assign(api, this.api),
      //列表初始化查询参数
      queryParam: {},
      tableObj:null,
      // 表头
      columns: [
        {
          title: "序号",
          width: "60px",
          align: "center",
          customRender: (text, record, index) => index + 1
        },
        {
          title: "账套",
          align: "left",
          width: "130px",
          ellipsis: true,
          hidden:isCn,
          dataIndex: "companyName"
        },
        {
          title: "流水号",
          align: "left",
          width: "120px",
          hidden:!isCn,
          ellipsis: true,
          length:20,
          dataIndex: "statementNo"
        },
        {
          title: "认款单号",
          align: "left",
          width: "120px",
          ellipsis: true,
          dataIndex: "paymentNo"
        },
        {
          title: "银行名称",
          align: "left",
          width: "110px",
          dataIndex: "bankName"
        },
        {
          title: "交易金额",
          align: "left",
          width: "90px",
          dataIndex: "amount"
        },
        {
          title: "交易日期",
          align: "left",
          width: "150px",
          dataIndex: "amountDate"
        },
        {
          title: "支付账户",
          align: "left",
          width: "150px",
          ellipsis: true,
          dataIndex: "bankNo"
        },
        {
          title: "客户名称",
          align: "left",
          width: "180px",
          ellipsis: true,
          dataIndex: "customName"
        },
      
        {
          title: "备注",
          align: "left",
          width: "120px",
          ellipsis: true,
          dataIndex: "remark"
        },
        {
          title: "认款状态",
          align: "center",
          fixed: "right",
          dataIndex: "amountState",
          scopedSlots: { customRender: "amountState" }
        },
        {
          title: "操作",
          align: "center",
          width: "80px",
          hidden:!isCn,
          fixed: "right",
          scopedSlots: { customRender: "action" }
        }
      ],
      operator: operator
    }
  },
  computed: {
    rowSelection() {
      return {
        getCheckboxProps: record => ({
          props: {
            disabled: record.amountState==1,
            name: record.amountState
          }
        })
      }
    }
  },
  created() {
  },
  mounted() {
    this.tableObj = this.$refs.table
  },
  methods: {
    uploadEnd() {
      this.$refs.uploadBankModal.close()
      this.$message.success("导入成功")
      this.$refs.table.refresh(false, this.queryParam)
    }
  }
}
</script>
